<template>
  <!-- 历史记录 -->
  <div class="history_box">
    <div class="history_list history_list_1">
      <div class="dialog_title_hide_icon">
        <div class="title" :class="{ mon_title: lang == '蒙文' }">{{ formatHistoryTitle(type) }}</div>
        <div class="hide_icon_box" @click="hideHistoryBox()"> 
          <img src="../assets/img/icon-hide.svg" alt="">
        </div>
      </div>

      <div class="history_header row border_b_1_s_ccc" :class="{ mon_history_header: lang == '蒙文' }">
        <div class="time col-3 fw_600" :class="{ mon: lang == '蒙文' }">{{ $t('shi_jian') }}</div> 
        <!-- 翻译 -->
        <div class="src_text col-3 fw_600" :class="{ mon: lang == '蒙文' }" v-if="type == 1">{{ $t('yuan_wen') }}</div> 
        <div class="trans_text col-3 fw_600" :class="{ mon: lang == '蒙文' }" v-if="type == 1">{{ $t('yi_wen') }}</div> 
        <div class="trans_lang col-3 fw_600" :class="{ mon: lang == '蒙文' }" v-if="type == 1">{{ $t('fang_xiang') }}</div> 

        <!-- OCR 识别 -->
        <div class="src_text col-5 fw_600" v-if="type == 2" :class="{ mon: lang == '蒙文' }">{{ $t('wen_jian') }}</div> 
        <div class="trans_text col-4 fw_600" v-if="type == 2" :class="{ mon: lang == '蒙文' }">{{ $t('shi_bie_jie_guo') }}</div> 

        <!-- 语音 识别 -->
        <div class="src_text col-5 fw_600" v-if="type == 3" :class="{ mon: lang == '蒙文' }">{{ $t('yu_yin_wen_jian') }}</div> 
        <div class="trans_text col-4 fw_600" v-if="type == 3" :class="{ mon: lang == '蒙文' }">{{ $t('shi_bie_jie_guo') }}</div> 
      </div>

      <div 
        class="history_item row" 
        v-for="(item, index) in historyList" :key="index"
        :class="{ table_active_row : tableIndex == index }"  
        @mouseover="hoverTableItem(index)"
        @click="showHistoryDetail(index)"
      >
        <div class="time col-3">{{ item.createTime }}</div> 

        <!-- 翻译 -->
        <div class="src_text col-3" v-if="type == 1" :class="{ mon_font: item.tfrom == 'mon' }">{{ item.srcTxt }}</div> 
        <div class="trans_text col-3" v-if="type == 1" :class="{ mon_font: item.tto == 'mon' }">{{ item.targetTxt }}</div> 
        <div class="trans_lang col-3" v-if="type == 1">
          <span :class="{ vertical: lang == '蒙文' }">{{ formatLang(item.tfrom) }}</span> 
          --> 
          <span :class="{ vertical: lang == '蒙文' }">{{ formatLang(item.tto) }}</span> 
        </div> 

        <!-- OCR 识别结果 -->
        <div class="src_text col-5" v-if="type == 2">{{ item.srcTxt.substring(23) }}</div> 
        <div class="trans_text col-4 mon_font" v-if="type == 2">{{ item.targetTxt.replace(/\u202f/g, '\u180e') }}</div> 

        <!-- 语音 识别结果 -->
        <div class="src_text col-5" v-if="type == 3">{{ item.srcTxt.substring(26) }}</div> 
        <div class="trans_text col-4 mon_font" v-if="type == 3">{{ item.targetTxt }}</div> 
      </div>
    </div>


    <!-- width < 992px 时显示 -->
    <div class="history_list history_list_2">
      <div class="dialog_title_hide_icon">
        <div class="title" :class="{ mon_title: lang == '蒙文' }">{{ formatHistoryTitle(type) }}</div>
        <div class="hide_icon_box" @click="hideHistoryBox()"> 
          <img src="../assets/img/icon-hide.svg" alt="">
        </div>
      </div>

      <div 
        class="history_item_2" 
        v-for="(item, index) in historyList" :key="index"
        :class="{ table_active_row : tableIndex == index }"  
        @mouseover="hoverTableItem(index)"
        @click="showHistoryDetail(index)"
      >
        <div v-if="type == 1">
          <div class="time_2">
            {{ $t('shi_jian') }} : {{ item.createTime }}
          </div>
          <div class="src_text" :class="{ mon_font: item.tfrom == 'mon' }">{{ $t('yuan_wen') }} : {{ item.srcTxt }}</div> 
          <div class="trans_text" :class="{ mon_font: item.tto == 'mon' }">{{$t('yi_wen') }} : {{ item.targetTxt }}</div> 
          <div class="trans_lang">{{ $t('fang_xiang') }}
            <span :class="{ vertical: lang == '蒙文' }">{{ formatLang(item.tfrom) }}</span> 
            --> 
            <span :class="{ vertical: lang == '蒙文' }">{{ formatLang(item.tto) }}</span> 
          </div> 
        </div>

        <div v-if="type == 2">
          <div class="time">
            {{ $t('shi_jian') }} : {{ item.createTime }}
          </div>

          <div class="src_text">{{ $t('wen_jian') }} : {{ item.srcTxt.substring(23) }}</div> 
          <div class="trans_text mon_font">{{ $t('shi_bie_jie_guo') }} : {{ item.targetTxt }}</div> 
        </div>

        <div v-if="type == 3">
          <div class="time">
            {{ $t('shi_jian') }} : {{ item.createTime }}
          </div>

          <div class="src_text">{{ $t('yu_yin_wen_jian') }} : {{ item.srcTxt.substring(26) }}</div> 
          <div class="trans_text mon_font">{{ $t('shi_bie_jie_guo') }} : {{ item.targetTxt }}</div> 
        </div>
      </div>
    </div>


  </div>
</template>

<script>
  export default {
    name: 'HistoryList',
    props: {
      type: {
        type: Number,
        default: 1
      },
      historyList: {
        type: Array,
        default: () => []
      },
      lang: ''
    },
    data() {
      return {
        tableIndex: null,
        historyDetail: {}
      }
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    methods: {
      // 格式标题
      formatHistoryTitle(type) {
        if (type === 1) {
          return this.$t('fan_yi_ji_lu') 
        } else if (type == 2) {
          return this.$t('OCR_shi_bie_ji_lu')
        } else if (type == 3) {
          return this.$t('yu_yin_shi_bie_ji_lu')
        }
      },

      // 格式化语言
      formatLang(lang) {
        if (lang === 'zh') {
          return this.$t('zhong_wen')
        } else if (lang == 'mon') {
          return this.$t('meng_wen')
        } else if (lang == 'en') {
          return this.$t('ying_wen')
        } else if (lang == 'jp') {
          return this.$t('ri_wen')
        }
      },
      
      // 鼠标经过 item
      hoverTableItem(index) {
        this.tableIndex = index
      },

      // 点击 历史记录 item
      showHistoryDetail(index) {
        this.$emit('historyDetail', this.historyList[index])
      },

      // 关闭 历史记录
      hideHistoryBox() {
        this.$emit('hideHistoryBox', false)
      },

      // 翻译记录
      transHistory() { this.getHistoryList('1') },

      // Ocr 记录
      ocrhistory() { this.getHistoryList('2') },

      // 转换历史
      changeHistory() { this.getHistoryList('4') },

      // 语音识别历史
      voiceHistory() { this.getHistoryList('3') }
    }
  }
</script>

<style lang="less" scoped>
  .mon { -webkit-text-orientation: sideways-right; height: 20px; writing-mode: vertical-lr; font-family: mn; position: relative; top: 20px; color: #fff; }
  .mon_title { -webkit-text-orientation: sideways-right; height: 100px; writing-mode: vertical-lr; font-family: mn; }
  .mon_font { -webkit-text-orientation: sideways-right; font-family: mn; }
  .mon_history_header { height: 80px !important; }
  .vertical { -webkit-text-orientation: sideways-right; writing-mode: vertical-lr; font-family: mn; position: relative; top: 10px; }

  .main_color { color: #3372e2; }
  .table_active_row { color: #3372e2 !important; }
  .mon_text { -webkit-text-orientation: sideways-right; writing-mode: vertical-lr !important; font-size: 20px; font-family: "mn"; }

  .history_box {
    width: 70%;
    height: 100%;
    overflow-y: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    background-color: #232323;
    box-sizing: border-box;
    border: 1px solid #fff;

    .history_list {
      width: 100%;

      .dialog_title_hide_icon {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        position: sticky;
        top: 0;
        left: 0;
        background-color: #232323;
        padding: 0 10px;

        .title { color: #fff; font-size: 22px; padding: 10px; }
        .hide_icon_box { margin-top: 10px; }
        .hide_icon_box:hover { cursor: pointer; }
      }

      .history_header {
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #909399;
        border-bottom: 1px solid #ebeef5;

        position: sticky;
        top: 50px;
        left: 0;
        z-index: 99;
        background-color: #232323;
      }

      .row { margin-left: 0 !important; }
      .history_item {
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #ebeef5;
        color: #83868a;
        padding: 0 10px;

        .time, .src_text, .trans_text, .trans_lang {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #fff !important;
        }
      }
      .history_item:hover {
        cursor: pointer;
        background-color: #131313;
      }
    } 

    .history_list_2 {
      .title {
        font-size: 16px !important;
      }
      .hide_icon_box {
        width: 20px;
        height: 20px;
        img { width: 100%; height: 100%; }
      }
      .history_header {
        width: 100%;
        height: 25px;
        line-height: 25px;
        color: #909399;
        border: 1px solid #ebeef5;

        position: sticky;
        top: 30px;
        left: 0;
        z-index: 99;
        background-color: #232323;
      }

      .history_item_2 {
        padding: 5px 10px;
        border-top: 1px solid #fff;
      }

      .dialog_title_hide_icon {
        border: 1px solid #fff;
      }
    }
  }

  @media screen and (min-width: 992px) {
    .history_list_1 { display: block; }
    .history_list_2 { display: none; }
  }

  @media screen and (max-width: 991px) {
    .history_box {  
      width: 90% !important;
      height: 80% !important;
      top: 45% !important;
    }
    .history_list_1 { display: none; }
    .history_list_2 { display: block; }
  }
</style>  